const tile = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
    })
})

var map = new ol.Map({
    target: 'map',
    layers: [
        tile
    ],
    view: new ol.View({
        center: [12676737.157879721, 2578348.6131051104],
        zoom: 15.4,
        projection: 'EPSG:3857'
    })
});

const source = new ol.source.Vector({
    url: './data/polygon.geojson',
    format: new ol.format.GeoJSON()
})

const vecLayer = new ol.layer.Vector({
    source: source,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#ff0000',
            width: 2
        }),
        fill: new ol.style.Fill({
            color: 'rgba(255,0,0,0.4)'
        })
    })
})
map.addLayer(vecLayer)

var selectSingleClick = new ol.interaction.Select({
    condition: ol.events.condition.singleClick,
    layers: [vecLayer],
    multi: true,
    style() {
        return new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(0, 0, 255, 0.1)'
            }),
            stroke: new ol.style.Stroke({
                color: 'rgba(0, 0, 255, 1)',
                width: 2
            })
        })
    }
});
map.addInteraction(selectSingleClick);
